<template>
  <div class="center">
    <n-card :bordered="false">
      <BasicForm
        @register="register"
        @submit="handleSubmit"
        @reset="handleReset"
        :submitButtonText="'查询'"
        :show-feedback="false"
        :resetButtonText="'重置'"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </n-card>
    <n-card :bordered="false" class="proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="actionRef"
        :actionColumn="actionColumn"
        @update:checked-row-keys="onCheckedRow"
        :scroll-x="1090"
      >
        <template #tableTitle>
          <n-space>
            <n-button size="small" @click="addTable"> 新增 </n-button>
            <n-button size="small"> 批量导入 </n-button>
          </n-space>
        </template>
      </BasicTable>
    </n-card>
    <Model
      :showModal="showModal"
      :FormData="FormData"
      :formValue="formValue"
      :title="title"
      @ModelClick="ModelClick"
      @close="close"
    />
    <ModelBox
      :ModelBox="ModelBox"
      :center="center"
      :title="title"
      @ModelClick="ModelClick"
      @close="close"
    />
  </div>
</template>

<script lang="ts">
  import { h, defineComponent, reactive, ref, toRaw, onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { getTableList } from '@/api/table/list';
  import { PlusOutlined } from '@vicons/antd';
  import { useRoute, useRouter } from 'vue-router';
  import { Model } from '@/components/Model';
  import { ModelBox } from '@/components/ModelBox';
  import { getEquipmentDetail, getEquipmentList } from '@/api/BaseInfo';
  export default defineComponent({
    components: {
      BasicTable,
      BasicForm,
      PlusOutlined,
      Model,
      ModelBox,
    },
    setup() {
      const rules = {
        name: { required: true, trigger: ['blur', 'input'], message: '请输入名称' },
        address: { required: true, trigger: ['blur', 'input'], message: '请输入地址' },
        date: {
          type: 'number',
          required: true,
          trigger: ['blur', 'change'],
          message: '请选择日期',
        },
      };
      const columns = [
        {
          title: '设备序列号',
          key: 'serialNo',
        },
        {
          title: '终端号',
          key: 'terminalNo',
        },
        {
          title: 'SIM卡号',
          key: 'simNo',
        },
        {
          title: '所属车辆',
          key: 'licenseNumber',
        },
      ];
      const router = useRouter();
      const formRef: any = ref(null);
      const center = ref(null);
      const message = useMessage();
      const actionRef = ref();
      const title = ref(null);
      const showModal = ref(false);
      const ModelBox = ref(false);
      const formBtnLoading = ref(false);
      const formValue = ref({});
      const FormData = ref([
        {
          label: '设备名称',
          type: 'n-input',
          enName: 'qiyemingcheng',
          clearable: true,
          size: 'small',
          placeholder: '请输入设备名称',
          span: 12,
        },
        {
          label: '所属车辆',
          type: 'n-select',
          enName: 'xiehui',
          clearable: true,
          size: 'small',
          placeholder: '请选择所属车辆',
          span: 12,
          options: [
            { label: '企业1', value: 1 },
            { label: '企业2', value: 2 },
          ],
        },
        {
          label: '更多字段',
          type: 'n-input',
          InputType: 'textarea',
          enName: 'ziduan',
          clearable: true,
          size: 'small',
          placeholder: '请输入字段',
          span: 24,
        },
      ]);
      const formParams = ref({
        name: '',
        address: '',
        date: null,
      });

      const params = ref({
        pageSize: 10,
        name: 'xiaoMa',
      });

      const actionColumn = reactive({
        width: 220,
        title: '操作',
        key: 'action',
        fixed: 'right',
        render(record) {
          return h(TableAction as any, {
            style: 'button',
            actions: [
              {
                label: '查看',
                type: 'primary',
                text: true,
                popConfirm: {
                  title: '确认',
                  okText: '是',
                  cancelText: '否',
                  confirm: () => {
                    alert('是');
                  },
                },
                onClick: see.bind(null, record),
              },
              {
                label: '编辑',
                type: 'primary',
                text: true,
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                type: 'primary',
                text: true,
                onClick: handleDelete.bind(null, record),
              },
            ],
            select: (key) => {
              message.info(`您点击了，${key} 按钮`);
            },
          });
        },
      });
      const schemas = [
        {
          field: 'name',
          component: 'NSelect',
          label: '行业领域',
          size: 'small',
          componentProps: {
            placeholder: '请选择行业领域',
            options: [
              {
                label: '行业领域1',
                value: 1,
              },
              {
                label: '行业领域2',
                value: 2,
              },
            ],
            onInput: (e: any) => {
              console.log(e);
            },
          },
        },
        {
          field: 'mobile',
          component: 'NInputNumber',
          label: '搜索栏',
          size: 'small',
          componentProps: {
            placeholder: '请输入搜索内容',
            showButton: false,
            onInput: (e: any) => {
              console.log(e);
            },
          },
        },
        {
          field: 'sousuo',
          component: 'NButton',
          name: '搜索',
          size: 'small',
        },
      ];
      const [register, {}] = useForm({
        gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
        labelWidth: 80,
        schemas,
      });
      const loadDataTable = async (res) => {
        console.log(res);
        return await getEquipmentList({ ...res, ...formParams, ...params.value });
      };

      const onCheckedRow = (rowKeys) => {
        console.log(rowKeys);
      };

      const reloadTable = () => {
        console.log('123');
      };
      const Deactivate = (record: Recordable) => {
        ModelBox.value = true;
        title.value = '停用&启用';
        center.value = '是否确定要停用&启用';
      };

      const handleEdit = (record: Recordable) => {
        router.push({ name: 'EquipmentInformationDetails', params: { id: record.id } });
      };

      const handleDelete = (record: Recordable) => {
        ModelBox.value = true;
        title.value = '删除';
        center.value = '是否确定要删除?';
      };
      const see = (record: Recordable) => {
        router.push({ name: 'EquipmentInformationDetails', params: { id: record.id } });
      };

      //查询
      const handleSubmit = (row) => {};
      //模态框确定
      const ModelClick = async (e) => {
        showModal.value = e;
        ModelBox.value = e;
      };
      //模态框关闭
      const close = (e) => {
        showModal.value = e;
        ModelBox.value = e;
      };
      //新增
      const addTable = () => {
        title.value = '新增设备';
        showModal.value = true;
      };
      return {
        addTable,
        rules,
        schemas,
        router,
        formRef,
        message,
        actionRef,
        showModal,
        ModelBox,
        formBtnLoading,
        formParams,
        params,
        actionColumn,
        register,
        loadDataTable,
        onCheckedRow,
        reloadTable,
        Deactivate,
        handleEdit,
        handleDelete,
        see,
        columns,
        handleSubmit,
        ModelClick,
        close,
        title,
        FormData,
        formValue,
        center,
      };
    },
  });
</script>

<style lang="less" scoped>
  .center :deep .n-card {
    margin: 0 0 20px 0;
  }
</style>
